<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基础语法 事件源</title>
       <!--事件源 
		一.鼠标事件操作
		①click():当元素呗点击时触发
		②dblclick():当元素呗双击时触发
		③mouseenter():当鼠标指针进入元素 触发
		④mouseleave():当鼠标指针离开元素 触发
		⑤mousemove():当鼠标指针在元素内移动时候触发,触发概率高【绘图 坐标】
		二.键盘事件操作【页面小游戏 三种】
		三.表单事件操作 【重要---前端后台交互 四种】
		四.文档/窗口事件操作
		-->	
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				border: 50px solid red;
				border-top-color: #00ffff;
				border-bottom-color: #ffaaff;
				border-right-color: #ff5500;
				border-left-color: #00ff7f;
				text-align: center;
				line-height: 200px;
				background: #aa00ff;
			}
		</style>
	</head>
	<body>
		<h1>鼠标事件源</h1>
		<button class="btn1">鼠标点击事件</button>
		<button id="btn2">鼠标双击事件</button>
		<div><span>鼠标移入和移出</span></div>
		<h1>表单事件源</h1>
		用户名：<input type="text" />
		<script>
			// 不许用元素选择器,class id 抓到input
			// DOM树理解：document   元素.属性.属性
			 //               html
				// 		head    body   
			 //      meta
				// charset---属性
			$('input[type="text"]').blur(function(){
				alert("失去表单焦点操作")
				
			});
			
			
			
			
			
			
			
			
			
			
			
			
			// $(".btn1").click(function(){
			// 	alert("鼠标点击了")
			// });
			// $("#btn2").dblclick(function(){
			// 	alert("鼠标双击了")
			//  });
			// 3.鼠标移入事件
			 // $('div span').mouseenter(function(){
				// document.write("鼠标移入了"); 
			 // });
			 // 4.鼠标移出事件
			  $('div span').mouseleave(function(){
			 	document.write("鼠标移出了"); 
			  })
			  // 5.鼠标跟随事件
			  $('div span').mousemove(function(e){
			  	alert("页面X值"+e.pageX+"页面Y值"+e.pageY); 
			  });
		</script>
	</body>
</html>